<script setup lang="ts">
import { ref,reactive, watch } from 'vue'
import Switch from '@/components/common/Switch.vue'
import CityPicker from '@/components/common/CityPicker.vue'
import $api from '@/api'
import useToast from '@/hooks/useToast';
import { useRouter,useRoute } from 'vue-router';
const $router=useRouter(),$route=useRoute()
const showCity=ref(false),id=$route.query.id
function changeCity(val:Array<any>) {
  form.province_code=val[0]?.value
  form.city_code=val[1]?.value
  form.area_code=val[2]?.value
  position.value=val.reduce((acc,curr,idx,arr) => acc+curr.name,'')
}
function submit() {
  form.formatted_address=`${position.value} ${form.address}`
  if(id){
    const {data}=$api.address.edit(form)
    watch(data,() =>{
      useToast('修改成功')
      $router.back()
    })
  }else{
    const {data}=$api.address.add(form)
    watch(data,() =>{
      useToast('新建成功')
      $router.back()
    })
  }
  
}
function init(){
  if(id){
    const {data}=$api.address.getByID(id)
    watch(data,(_data) =>{
      Object.assign(form,_data)
      position.value=_data.formatted_address.split(' ')[0]
    })
  }
}
const position=ref('省市区县,乡镇等')
const form=reactive({
  name:'',
  mobile:'',
  mobile_area_code:'+86',
  province_code:'',
  city_code:'',
  area_code:'',
  address:'',
  is_default:false,
  formatted_address:''
})
init()
</script>

<template>
  <form @submit.prevent="submit" autocomplete="off">
    <div
      w:flex="~ nowrap"
      w:align="items-center"
      w:justify="between"
      w:border="b-2 solid gray-300"
      w:p="y-6"
      w:m="x-4"
      w:text="2xl"
    >
      <div>收货人</div>
      <input placeholder="请填写收货人姓名" v-model="form.name" required
        w:outline="none"
        w:m="x-4"
        w:h="full"
        w:bg="transparent"
        w:flex="1"
        w:font="bold"
      />
    </div>
    <div
      w:flex="~ nowrap"
      w:align="items-center"
      w:justify="between"
      w:border="b-2 solid gray-300"
      w:p="y-6"
      w:m="x-4"
      w:text="2xl"
    >
      <div>手机号码</div>
      <input placeholder="请填写收货人手机号" v-model="form.mobile" required
        w:outline="none"
        w:m="x-4"
        w:h="full"
        w:bg="transparent"
        w:flex="1"
        w:font="bold"
      />
    </div>
    <div
      w:flex="~ nowrap"
      w:align="items-center"
      w:justify="between"  
      w:border="b-2 solid gray-300"
      w:p="y-6"
      w:m="x-4"
      w:text="2xl"
    >
      <div>所在地区</div>
      <div @click="showCity=true"
        w:m="x-4"
        w:h="full"
        w:bg="transparent"
        w:flex="1"
        w:font="bold"
      >&nbsp;{{position}}</div>
    </div>
    <div
      w:flex="~ nowrap"
      w:align="items-center"
      w:justify="between"
      w:border="b-2 solid gray-300"
      w:p="y-6"
      w:m="x-4"
      w:text="2xl"
    >
      <div>详细地址</div>
      <input placeholder="街道,楼牌号等" v-model="form.address" required
        w:outline="none"
        w:m="x-4"
        w:h="full"
        w:bg="transparent"
        w:flex="1"
        w:font="bold"
      />
    </div>
    <div
      w:flex="~ nowrap"
      w:align="items-center"
      w:justify="between"
      w:border="b-2 solid gray-300"
      w:p="y-6"
      w:m="x-4"
      w:text="2xl"
    >
      <div>
        <div>设置默认地址</div>
        <div
          w:text="xs gray-400"
          w:m="t-4"
        >提醒:每次下单会默认推荐使用该地址</div>
      </div>
      <Switch v-model="form.is_default" size="large" />
    </div>
    <div
      w:flex="~ nowrap"
      w:justify="center"
    >
      <input type="submit" value="保存" 
        w:bg="red-500"
        w:border="rounded-full"
        w:w="1/2"
        w:text="4xl white center"
        w:p="y-4"
        w:m="x-auto t-8"
      />
    </div>
    <CityPicker v-model:visible="showCity" @change="changeCity" :value="[form.province_code,form.city_code,form.area_code]" />
  </form>
</template>

<style scoped lang="scss">

</style>

<route>
{
  meta: {
    title: '新建收货地址',
    auth: true
  }
}
</route>